<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态菜单示例</title>
    <!-- 引入Vue -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#36CFC9',
                        dark: '#1D2129',
                        light: '#F2F3F5',
                        muted: '#86909C'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .menu-shadow {
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            }
            .menu-hover {
                @apply transition-all duration-300 hover:bg-primary/10 hover:text-primary;
            }
            .submenu-enter {
                @apply opacity-0 transform -translate-y-2;
            }
            .submenu-enter-active {
                @apply transition-all duration-300 opacity-100 transform translate-y-0;
            }
        }
    </style>
</head>
<body class="bg-gray-50 font-inter text-dark min-h-screen">
    <div id="app" class="flex h-screen overflow-hidden">
        <!-- 侧边栏菜单 - 桌面版 -->
        <aside class="hidden md:flex flex-col w-64 bg-white menu-shadow transition-all duration-300 ease-in-out z-20">
            <!-- 品牌/Logo区域 -->
            <div class="p-4 border-b flex items-center space-x-2">
                <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white">
                    <i class="fa fa-bars"></i>
                </div>
                <h1 class="text-lg font-semibold">动态菜单</h1>
            </div>
            
            <!-- 菜单列表 -->
            <nav class="flex-1 overflow-y-auto py-4 px-3">
                <ul class="space-y-1">
                    <!-- 主菜单通过v-for渲染 -->
                    <li v-for="(menu, index) in menus" :key="index" class="mb-1">
                        <div 
                            v-if="!menu.children || menu.children.length === 0"
                            :class="['flex items-center px-4 py-3 rounded-lg cursor-pointer menu-hover', menu.active ? 'bg-primary/10 text-primary font-medium' : '']"
                            @click="handleMenuClick(menu)"
                        >
                            <i class="fa" :class="menu.icon" class="w-5 text-center mr-3"></i>
                            <span>{{ menu.name }}</span>
                        </div>
                        
                        <!-- 带有子菜单的菜单项 -->
                        <div v-else>
                            <div 
                                :class="['flex items-center justify-between px-4 py-3 rounded-lg cursor-pointer menu-hover', menu.active ? 'bg-primary/10 text-primary font-medium' : '']"
                                @click="toggleSubmenu(index)"
                            >
                                <div class="flex items-center">
                                    <i class="fa" :class="menu.icon" class="w-5 text-center mr-3"></i>
                                    <span>{{ menu.name }}</span>
                                </div>
                                <i class="fa fa-chevron-down text-xs transition-transform duration-300" :class="menu.expanded ? 'transform rotate-180' : ''"></i>
                            </div>
                            
                            <!-- 子菜单 -->
                            <ul v-if="menu.expanded" class="mt-1 ml-6 pl-3 border-l-2 border-gray-100">
                                <li v-for="(submenu, subIndex) in menu.children" :key="subIndex" class="mb-1">
                                    <div 
                                        :class="['flex items-center px-4 py-2.5 rounded-lg cursor-pointer text-sm menu-hover', submenu.active ? 'bg-primary/10 text-primary font-medium' : 'text-muted']"
                                        @click="handleSubmenuClick(menu, submenu)"
                                    >
                                        <i class="fa" :class="submenu.icon || 'fa-circle-o text-xs'" class="w-5 text-center mr-3"></i>
                                        <span>{{ submenu.name }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            
            <!-- 用户区域 -->
            <div class="p-4 border-t">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover">
                    <div>
                        <p class="text-sm font-medium">张小明</p>
                        <p class="text-xs text-muted">管理员</p>
                    </div>
                    <button class="ml-auto text-muted hover:text-primary transition-colors">
                        <i class="fa fa-sign-out"></i>
                    </button>
                </div>
            </div>
        </aside>
        
        <!-- 移动端菜单按钮 -->
        <button 
            class="md:hidden fixed top-4 left-4 z-30 bg-white p-2 rounded-lg shadow-lg"
            @click="showMobileMenu = !showMobileMenu"
        >
            <i class="fa fa-bars text-primary"></i>
        </button>
        
        <!-- 移动端侧边菜单 -->
        <aside 
            class="md:hidden fixed inset-y-0 left-0 w-64 bg-white shadow-xl transform transition-transform duration-300 ease-in-out z-30"
            :class="showMobileMenu ? 'translate-x-0' : '-translate-x-full'"
        >
            <!-- 移动端菜单内容和桌面版相同 -->
            <div class="p-4 border-b flex items-center justify-between">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-lg bg-primary flex items-center justify-center text-white">
                        <i class="fa fa-bars"></i>
                    </div>
                    <h1 class="text-lg font-semibold">动态菜单</h1>
                </div>
                <button @click="showMobileMenu = false" class="text-muted hover:text-primary">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            
            <nav class="flex-1 overflow-y-auto py-4 px-3">
                <ul class="space-y-1">
                    <!-- 与桌面版菜单相同的结构 -->
                    <li v-for="(menu, index) in menus" :key="index" class="mb-1">
                        <div 
                            v-if="!menu.children || menu.children.length === 0"
                            :class="['flex items-center px-4 py-3 rounded-lg cursor-pointer menu-hover', menu.active ? 'bg-primary/10 text-primary font-medium' : '']"
                            @click="handleMenuClick(menu); showMobileMenu = false"
                        >
                            <i class="fa" :class="menu.icon" class="w-5 text-center mr-3"></i>
                            <span>{{ menu.name }}</span>
                        </div>
                        
                        <div v-else>
                            <div 
                                :class="['flex items-center justify-between px-4 py-3 rounded-lg cursor-pointer menu-hover', menu.active ? 'bg-primary/10 text-primary font-medium' : '']"
                                @click="toggleSubmenu(index)"
                            >
                                <div class="flex items-center">
                                    <i class="fa" :class="menu.icon" class="w-5 text-center mr-3"></i>
                                    <span>{{ menu.name }}</span>
                                </div>
                                <i class="fa fa-chevron-down text-xs transition-transform duration-300" :class="menu.expanded ? 'transform rotate-180' : ''"></i>
                            </div>
                            
                            <ul v-if="menu.expanded" class="mt-1 ml-6 pl-3 border-l-2 border-gray-100">
                                <li v-for="(submenu, subIndex) in menu.children" :key="subIndex" class="mb-1">
                                    <div 
                                        :class="['flex items-center px-4 py-2.5 rounded-lg cursor-pointer text-sm menu-hover', submenu.active ? 'bg-primary/10 text-primary font-medium' : 'text-muted']"
                                        @click="handleSubmenuClick(menu, submenu); showMobileMenu = false"
                                    >
                                        <i class="fa" :class="submenu.icon || 'fa-circle-o text-xs'" class="w-5 text-center mr-3"></i>
                                        <span>{{ submenu.name }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </nav>
            
            <div class="p-4 border-t">
                <div class="flex items-center space-x-3">
                    <img src="https://picsum.photos/id/1005/40/40" alt="用户头像" class="w-9 h-9 rounded-full object-cover">
                    <div>
                        <p class="text-sm font-medium">张小明</p>
                        <p class="text-xs text-muted">管理员</p>
                    </div>
                    <button class="ml-auto text-muted hover:text-primary transition-colors">
                        <i class="fa fa-sign-out"></i>
                    </button>
                </div>
            </div>
        </aside>
        
        <!-- 遮罩层 - 移动端菜单打开时显示 -->
        <div 
            class="md:hidden fixed inset-0 bg-black bg-opacity-50 z-20 transition-opacity duration-300"
            v-if="showMobileMenu"
            @click="showMobileMenu = false"
        ></div>
        
        <!-- 这里原本是主内容区域，根据需求已移除 -->
    </div>

    <script>
        // 创建Vue应用
        const { createApp } = Vue;
        
        createApp({
            data() {
                return {
                    // 菜单数据 - 从这里动态渲染菜单
                    menus: [
                        {
                            name: "首页",
                            icon: "fa-home",
                            active: true,
                            expanded: false,
                            children: []
                        },
                        {
                            name: "用户管理",
                            icon: "fa-users",
                            active: false,
                            expanded: true,
                            children: [
                                {
                                    name: "用户列表",
                                    icon: "fa-list",
                                    active: false
                                },
                                {
                                    name: "添加用户",
                                    icon: "fa-plus-circle",
                                    active: false
                                },
                                {
                                    name: "用户分组",
                                    icon: "fa-object-group",
                                    active: false
                                }
                            ]
                        },
                        {
                            name: "内容管理",
                            icon: "fa-file-text",
                            active: false,
                            expanded: false,
                            children: [
                                {
                                    name: "文章列表",
                                    active: false
                                },
                                {
                                    name: "分类管理",
                                    active: false
                                },
                                {
                                    name: "评论管理",
                                    active: false
                                }
                            ]
                        },
                        {
                            name: "系统设置",
                            icon: "fa-cog",
                            active: false,
                            expanded: false,
                            children: [
                                {
                                    name: "基本设置",
                                    active: false
                                },
                                {
                                    name: "安全设置",
                                    active: false
                                },
                                {
                                    name: "权限管理",
                                    active: false,
                                    children: [
                                        {
                                            name: "角色管理",
                                            active: false
                                        },
                                        {
                                            name: "权限分配",
                                            active: false
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            name: "数据统计",
                            icon: "fa-bar-chart",
                            active: false,
                            expanded: false,
                            children: []
                        },
                        {
                            name: "帮助中心",
                            icon: "fa-question-circle",
                            active: false,
                            expanded: false,
                            children: []
                        }
                    ],
                    // 移动端菜单显示状态
                    showMobileMenu: false
                };
            },
            methods: {
                // 切换子菜单展开/折叠状态
                toggleSubmenu(index) {
                    this.menus[index].expanded = !this.menus[index].expanded;
                },
                
                // 处理主菜单点击
                handleMenuClick(menu) {
                    // 重置所有菜单的active状态
                    this.resetMenuActiveStates();
                    // 设置当前菜单为active
                    menu.active = true;
                    
                    // 可以在这里添加菜单点击后的逻辑
                    console.log("点击了菜单:", menu.name);
                },
                
                // 处理子菜单点击
                handleSubmenuClick(parentMenu, submenu) {
                    // 重置所有菜单的active状态
                    this.resetMenuActiveStates();
                    // 设置父菜单和子菜单为active
                    parentMenu.active = true;
                    submenu.active = true;
                    
                    // 确保父菜单展开
                    parentMenu.expanded = true;
                    
                    // 可以在这里添加子菜单点击后的逻辑
                    console.log("点击了子菜单:", parentMenu.name, ">", submenu.name);
                },
                
                // 重置所有菜单的active状态
                resetMenuActiveStates() {
                    this.menus.forEach(menu => {
                        menu.active = false;
                        
                        if (menu.children && menu.children.length > 0) {
                            menu.children.forEach(submenu => {
                                submenu.active = false;
                                
                                // 处理二级子菜单
                                if (submenu.children && submenu.children.length > 0) {
                                    submenu.children.forEach(child => {
                                        child.active = false;
                                    });
                                }
                            });
                        }
                    });
                }
            }
        }).mount('#app');
    </script>
</body>
</html>
